<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Project Form</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="/projects">Project Manager</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/projects">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/projects/new">New Project</a>
                </li>
            </ul>
        </div>
        <div class="d-flex">
                <span class="navbar-text text-white me-3">
                    <span th:text="${#authentication.name}">User</span>
                </span>
            <a href="/logout" class="btn btn-outline-light">Logout</a>
        </div>
    </div>
</nav>

<div class="container mt-5">
    <h1 class="mb-4" th:if="${project.id == null}">Create New Project</h1>
    <h1 class="mb-4" th:if="${project.id != null}">Edit Project</h1>

    <form th:action="@{/projects/save}" method="post" th:object="${project}">
        <input type="hidden" th:field="*{id}" />

        <div class="mb-3">
            <label for="name" class="form-label">Project Name</label>
            <input type="text" id="name" th:field="*{name}" class="form-control" required>
        </div>

        <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea id="description" th:field="*{description}" class="form-control" rows="4"></textarea>
        </div>

        <div class="mb-3">
            <label for="startDate" class="form-label">Start Date</label>
            <input type="date" id="startDate" th:field="*{startDate}" class="form-control">
        </div>

        <div class="mb-3">
            <label for="endDate" class="form-label">End Date</label>
            <input type="date" id="endDate" th:field="*{endDate}" class="form-control">
        </div>

        <div class="mb-3">
            <button type="submit" class="btn btn-primary">Save Project</button>
            <a href="/projects" class="btn btn-secondary ms-2">Cancel</a>
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>